<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css"
			href="../../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
		<style type="text/css">
			body {
				background: #f7f1e3;
			}

			.row {
				position: absolute;
				top: 0;
				width: 100vw;
				height: 100vh;


			}

			.left {
				position: absolute;
				left: 2%;
				width: 48%;

				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.right {
				position: absolute;
				right: 2%;
				width: 48%;

				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.hidden {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="left">
				<div class="panel panel-default" style="position: absolute; width: 90%;height: 90%;">
					<div class="panel-heading" style="background: #d2dae2;">
						<h3 class="panel-title">添加菜品表单</h3>
					</div>
					<div class="panel-body">
						<form id="uploadForm" action="/img_upload"  method="post" enctype="multipart/form-data">

							<div class="form-group">
								<div class="col-md-5">
									<label for="fileName" class="col-form-label">菜名</label>
									<input type="text" name="name" autofocus class="form-control" id="name">
								</div>
								<div class="col-md-5 col-md-offset-2" ">
									<label for=" exampleInputEmail1">分类</label>
									<select name="category" class="form-control" id="category" style="padding: 0;">
										<option value="荤菜">荤菜</option>
										<option value="素菜">素菜</option>
										<option value="主食">主食</option>
										<option value="饮品">饮品</option>
										<option value="甜品">甜品</option>
										<option value="汤类">汤类</option>
										<option value="凉菜">凉菜</option>
									</select>
								</div>
							</div>



							<div class="form-group">
								<div class="col-md-5">
									<label for="fileName" class="col-form-label">成本</label>
									<input type="text" name="cost" autofocus class="form-control" id="cost">
								</div>
								<div class="col-md-5 col-md-offset-2">
									<label for="fileName" class="col-form-label">价格</label>
									<input type="text" name="price" autofocus class="form-control" id="price">
								</div>

							</div>

							<div class="form-group">
								<div class="col-md-12">
									<label for="exampleInputEmail1">详细信息</label>
									<div class="input-group" style="width: 100%;">
										<textarea rows="5" name="info" id="info" class="form-control" placeholder="菜品信息"
											style="margin-bottom:20px;"></textarea>
									</div>
								</div>
							</div>
						
							<div class="form-group">
								<div class="col-md-12">
									<input type="file" name="myfile" id="file" style="width: 0;height: 0"><br>
									<!--默认的HTML文件上传控件，onchange属性调用JavaScript读取上传的文件名，修改第二个标签的显示内容，同时设置该上传控件长宽为0不显示，不占用页面控件，或者设置hidden，但是会占用一点空间-->
									<label class="btn btn-info" for="file">上传图片</label>
									<!--利用标签的for属性实现点击标签触发文件上传，同时设计成按钮样式-->

									<input id="fileName" name="fileName" type="text" style="height:30px;width:78%;">

								</div>

								<!-- <label id="filePos">未上传</label><!--定义一个显示文件名的标签-->
							</div>

							<div class="col-md-12" style="top:15px;">
								
								<button type="submit"  class="btn btn-success" >保存添加</button>
								
							</div>
							
						</form>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="panel panel-default" style="position: absolute; width: 90%;height: 90%;">
					<div class="panel-heading" style="background: #d2dae2;;">
						<h3 class="panel-title">效果图</h3>
					</div>
					<div class="panel-body" style="display: flex; justify-content: center;height: 100%;">
						<img id="img" src="" class="img-responsive hidden" alt="Responsive image"
							style="max-width: 100%;max-height: 90%;">
					</div>
				</div>
			</div>

		</div>
		<script src="../../../static/js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"
			charset="utf-8"></script>
		<script type="text/javascript">
			$('#file').change(function(e) {
				//console.log(e)
				var files = event.target.files,
					file
				if (files && files.length > 0) {
					file = files[0]
					console.log(file)
					// var formData = new FormData();
					// formData.append('file', file);  //添加图片信息的参数
					// formData.append("name", file.name);
					// console.log(formData)
					// $.ajax({
					//     url: "/img_upload",
					//     type: "post",
					//     dataType: "json",
					//     cache: false,
					//     data: formData,
					//     processData: false,// 不处理数据
					//     contentType: false, // 不设置内容类型
					//     success: function (data) {
					//         alert("添加成功");
					//        console.log(data)
					//     }
					// })
					$('#fileName').val(file.name)
					var URL = window.URL || window.webkitURL
					var imgURL = URL.createObjectURL(file)
					console.log(imgURL)
					$('#img').removeClass('hidden')
					$('#img').attr('src', imgURL)
				}
			})
			
			async function add() {
				var data=new FormData($('#uploadForm')[0])
				console.log(data)
				$.ajax({
				    url: '/img_upload',
				    type: 'POST',
				    cache: false,
				    data: data,
				    processData: false,
				    contentType: false
				}).done(function(res) {
					
				}).fail(function(res) {});
				// //console.log('yes')
			 //        var formData = new FormData();
			 //        formData.append('file', $('#file')[0].files[0]);  //添加图片信息的参数
			 //        formData.append("name", $("#fileName").val());
			 //        console.log($('#file').val())
			 //        $.ajax({
			 //            url: "/img_upload",
			 //            type: "post",
			 //            dataType: "json",
			 //            cache: false,
			 //            data: formData,
			 //            processData: false,// 不处理数据
			 //            contentType: false, // 不设置内容类型
			 //            success: function (data) {
			 //                alert("添加成功");
			 //               console.log(data)
			 //            }
			 //        })
			
			    }
			
			
			
		</script>
	</body>
</html>
